<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    [#include "../../../include/header.ftl" /]
    <link rel="stylesheet" href="${ctx}/static/apls/assets/css/components.min.css">
</head>
<body>
<div>
    <div class="col-md-12" style="padding-top: 5px">
        <div class="portlet light bordered" style="margin-bottom: 10px;">
            <div class="portlet-title tabbable-line">
                <div class="caption">
                    <i class="fa fa-user font-green-sharp"></i>
                    <span class="caption-subject bold font-green-sharp uppercase"> 配色转换器 </span>
                </div>
            </div>
            <div class="portlet-body form">
                <form role="form" class="form-horizontal">
                    <div class="form-body">
                        <div class="row">
                            <div class="col-md-12" style="padding-bottom: 10px">
                                <span>hex色值:</span> <input type="text" style="width: 120px" id="hex" value="">
                                <span>rgb色值:</span> <input type="text" style="width: 120px" id="rgb" value="">
                            </div>
                            <div class="col-md-12">
                                <button type="submit" id="but" class="btn btn-primary">
                                    <i class="fa fa-search"></i> 查询
                                </button>
                            </div>
                            <div id="color">

                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>

    </div>

</div>
</body>
<script src="${ctx}/static/js/common/custom.color.js"></script>
<script type="text/javascript">
    $(function () {
        $("#but").on("click", function () {
            $("#color").html('');
            var f = $("#hex").val();
            $("#color").append("<div>rgb:" + f.colorRgb() + "</div>");
            var t = $("#rgb").val();
            if (t != "") {
                $("#color").append("<div>rgb:" + t.colorHex() + "</div>");
            }
        });
    })
</script>
</html>